<template>
  <div class="assets_page">
    <div class="echart_box">
      <div id="assets_echart" class="my_assets"></div>
    </div>
    <div class="assets_box">
      <van-cell title="活期" :value="current|currency" is-link></van-cell>
      <van-cell title="定期" :value="regular|currency" is-link></van-cell>
      <van-cell title="电子银票" :value="silverTicket|currency" is-link></van-cell>
      <van-cell title="定期理财" :value="regularFinancial|currency" is-link></van-cell>
      <van-cell title="电子商票" :value="commerceTicket|currency" is-link></van-cell>
      <van-cell title="大额存单" :value="largeDeposit|currency" is-link></van-cell>
      <van-cell title="增值存" :value="valueAddedDeposit|currency" is-link></van-cell>
      <van-cell title="结构性存款" :value="structuredDeposits|currency" is-link></van-cell>
    </div>

  </div>
</template>

<script>
import Echart from 'echarts';

export default {
  data() {
    return {
      current: 50000, // 活期
      regular: 1000, // 定期
      silverTicket: 100, // 电子银票
      regularFinancial: 15000, // 定期理财
      commerceTicket: 0, // 电子商票
      largeDeposit: 0, // 大额存单
      valueAddedDeposit: 200, // 增值存
      structuredDeposits: 100 // 结构性存款
    };
  },
  methods: {
    initChart() {
      const echart = Echart.init(document.getElementById('assets_echart'));
      const datas = [
        { value: this.current, name: '活期', itemStyle: { color: '#1686F4' } },
        { value: this.regular, name: '定期', itemStyle: { color: '#645BDA' } },
        { value: this.silverTicket, name: '电子银票', itemStyle: { color: '#FF7790' } },
        { value: this.regularFinancial, name: '定期理财', itemStyle: { color: '#F29621' } },
        { value: this.commerceTicket, name: '电子商票', itemStyle: { color: '#FE6A00' } },
        { value: this.largeDeposit, name: '大额存单', itemStyle: { color: '#917575' } },
        { value: this.valueAddedDeposit, name: '增值存', itemStyle: { color: '#7E0088' } },
        { value: this.structuredDeposits, name: '结构性存款', itemStyle: { color: '#30A02F' } }
      ];
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 20,
          top: 35,
          itemHeight: 6,
          icon: 'circle',
          data: ['活期', '定期', '电子银票', '定期理财', '电子商票', '大额存单', '增值存', '结构性存款']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            right: '30%',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: datas
          }
        ]
      };
      echart.setOption(option);
    }
  },
  mounted() {
    console.log(1);
    this.initChart();
  }
};
</script>

<style lang="less">
  .assets_page {
    width: 100%;
    height: 100%;
    background-color: #EFEFEF;
    .my_assets{
      width: 100vw;
      height: 250PX;
      background-color: #fff;
    }
    .assets_box{
      /*text-align: right;*/
    }
  }
</style>
